<template>
  <view
    class="modal-content"
    id="modal"
    @click="closeOnClickOverlay && hide()"
    :style="{
      zIndex: zIndex,
      transform: `scale(${visible ? 1 : 0})`,
      backgroundColor: `rgba(61,61,61,${visible ? '.6' : '0'})`,
    }"
  >
    <view class="modal-body" @click.stop v-if="visible">
      <view class="hd" :style="{ color: titleColor }" v-if="showTitle">
        {{ title }}
      </view>
      <view
        class="content"
        :style="[{ color: contentColor }, contentCustomerStyle]"
      >
        <slot>
          {{ content }}
        </slot>
      </view>
      <view class="ft" v-if="leftBtnVisible || rightBtnVisible">
        <view
          class="btn left"
          @click="handleLeftBtnClick"
          v-if="leftBtnVisible"
          :style="{
            backgroundColor: leftBtnBgColor,
            color: leftBtnTextColor || themeColor,
          }"
        >
          {{ leftBtnText }}
        </view>
        <view
          class="btn right"
          @click="handleRightBtnClick"
          v-if="rightBtnVisible"
          :style="{
            backgroundColor: rightBtnBgColor || themeColor,
            color: rightBtnTextColor,
          }"
        >
          {{ rightBtnText }}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState } from "@dcloudio/vue-cli-plugin-uni/packages/vuex3/dist/vuex.common";

export default {
  name: "Modal",
  computed: {
    ...mapState("sp-common/base", ["themeColor"]),
  },
  props: {
    // 是否显隐
    visible: {
      type: Boolean,
      default: false,
    },
    // z-index 层级
    zIndex: {
      type: Number,
      default: 11,
    },
    // 弹窗标题
    title: {
      type: String,
      default: "提示",
    },
    //是否显示弹窗标题
    showTitle: {
      type: Boolean,
      default: true,
    },
    // 标题颜色
    titleColor: {
      type: String,
      default: "#131313",
    },
    //文本内容
    content: {
      type: String,
      default: "",
    },
    //文本颜色
    contentColor: {
      type: String,
      default: "#131313",
    },
    // 是否显示右边按钮
    rightBtnVisible: {
      type: Boolean,
      default: true,
    },
    // 是否显示左边按钮
    leftBtnVisible: {
      type: Boolean,
      default: true,
    },
    // 右边按钮文字
    rightBtnText: {
      type: String,
      default: "取消",
    },
    // 右边按钮文字颜色
    rightBtnTextColor: {
      type: String,
      default: "#ffffff",
    },
    // 右边按钮背景颜色
    rightBtnBgColor: {
      type: String,
      default: "",
    },
    // 左边按钮文字
    leftBtnText: {
      type: String,
      default: "确定",
    },
    // 左边按钮文字颜色
    leftBtnTextColor: {
      type: String,
      default: "",
    },
    // 左边按钮背景色
    leftBtnBgColor: {
      type: String,
      default: "",
    },
    // 是否允许点击遮罩关闭
    closeOnClickOverlay: {
      type: Boolean,
      default: true,
    },
    contentCustomerStyle: {
      type: Object,
      default: () => {},
    },
  },
  methods: {
    open() {
      this.$emit("update:visible", true);
    },
    hide() {
      this.$emit("update:visible", false);
    },
    handleLeftBtnClick() {
      this.$emit("update:visible", false);
      this.$emit("cancel");
      this.hide();
    },
    handleRightBtnClick() {
      this.$emit("confirm");
      // this.hide();
    },
  },
};
</script>
<style lang="scss" scoped>
.modal-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;

  .modal-body {
    width: 600rpx;
    background-color: #fff;
    border-radius: 15rpx;

    .hd {
      text-align: center;
      padding-top: 10rpx;
    }
    .content {
      width: 100%;
      padding: 90rpx 0;
      border-radius: 15rpx 15rpx 0 0;
      font-size: 29rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .ft {
      display: flex;
      border-top: 1rpx solid #e3e3e3;
      border-radius: 0 0 15rpx 15rpx;
      overflow: hidden;

      .btn {
        flex: 1;
        height: 75rpx;
        box-sizing: border-box;
        font-size: 29rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &:active {
          opacity: 0.5;
        }
      }
    }
  }
}
</style>
